/*使用例子

一、实例参考
    /DECISION/src/main/webapp/WEB-INF/jsp/finance/priceAgVue.jsp

页面打开方式
    http://127.0.0.1:8080/page.do?url=./finance/priceAgVue
console中调用：
    this.app.userDeptChanged('杭州迪安');
    this.app.clientpriceList.searchData.rasClientId="FMI-迪安测试医院";
    this.app.clientpriceList.list();


二、依赖
    jquery
    <script src="js/@ag-grid-enterprise/all-modules@26.0.1/dist/ag-grid-enterprise.js"></script>
    <link href="js/@ag-grid-enterprise/all-modules@26.0.1/dist/styles/ag-grid.css" />
    <link href="js/@ag-grid-enterprise/all-modules@26.0.1/dist/styles/ag-theme-alpine.css" />
    <script src="js/vue/aggrid.js"></script>


 三、   页面部分
    <ag-grid  :height="clientpriceList.height"   :opt="clientpriceList.gridOptions"></ag-grid>
 四、js部分
    data：
        gridOptions: {
                rowData: [],//必须有
                defaultColDef: {
                    enableRowGroup: true,
                    enablePivot: true,
                    enableValue: true,
                    sortable: true,
                },
                //定义ag-grid列
                columnDefs: [

                    { headerName: '测试编号', floatingFilter: true, field: 'testCode', sort: "asc", resizable: true, filter: true, sortable: true, width: 100, 'pinned': 'left', filter: 'agNumberColumnFilter' },
                    { headerName: '测试名称', floatingFilter: true, field: 'testNo', resizable: true, filter: true, sortable: true, width: 250, cellEditor: "agTextCellEditor", 'pinned': 'left', filter: 'agTextColumnFilter' },
                    { headerName: '测试分类', floatingFilter: true, field: 'testCat', resizable: true, filter: true, sortable: true, width: 100, filter: 'agTextColumnFilter' },
                    { headerName: '疾病类型', floatingFilter: true, field: 'disease', resizable: true, filter: true, sortable: true, width: 100, filter: 'agTextColumnFilter' },
                    { headerName: '状态', floatingFilter: true, field: 'status', resizable: true, filter: true, sortable: true, width: 100, cellEditor: 'agSelectCellEditor', cellEditorParams: { values: ["使用中", "停止使用"] } },
                    { headerName: '扣率类别', floatingFilter: true, field: 'discountKindName', resizable: true, filter: true, sortable: true, editable: true, width: 100, cellEditor: "agSelectCellEditor", cellEditorParams: { values: ["总扣率", "分测试扣率", "单测试扣率"] } },
                    { headerName: '体检扣率', floatingFilter: true, field: 'discount1', resizable: true, filter: true, sortable: true, editable: true, width: 100, filter: 'agNumberColumnFilter' },
                 
                ],

                //单元格编辑完成事件**************************
                onCellEditingStopped(event) {
                    var origrec = event.data.origrec
                    var key = event.column.colId;
                    var value = event.value;
                    var oldValue = event.oldValue;

                    Vue.http.post("client/directUpdate.do", { origrec: origrec, key: key, value: value }, { emulateJSON: true }).then(function (res) {
                        if (res.data.code == 1) {
                        } else {
                            alert(res.data.message);
                        }
                    })

                },
                //ag-grid创建完成后执行的事件

                //单元格点击事件
                onCellClicked(cell) {
                    console.log(cell);
                    // 获取选中单元格所在行号
                    console.log(cell.rowIndex);
                    // 获取选中单元格所在行的数据
                    console.log(cell.data);
                },
                onGridReady: function () {

                },
                defaultColDef: {
                    resizable: true,//是否可以调整列大小，就是拖动改变列大小
                    filter: false  //开启刷选
                },

            },
            height: 600,

            //下面是自己的功能，与ag-grid 无关
            

            // 导出
            export() {
                window.open('clientPrice/listExport.do?rasClientId=' + this.searchData.rasClientId + "&spName=" + app.userDept);
            },
            searchData: {
                rasClientId: null,
                spName: null,
                pageSize: 10000,
            },

            list() {
                console.log("list");

                var that = this;
                that.gridOptions.api.setRowData([]);
                myProgressBar.show();
                Vue.http.post("clientPrice/list.do", this.searchData, { emulateJSON: true }).then(function (res) {
                    myProgressBar.hide();
                    if (res.data.code == 1) {
                        //放数据
                        that.gridOptions.api.setRowData(res.data.data.list);
                        //放条件
                        that.gridOptions.api.setFilterModel({
                            status: {
                                filterType: 'set',
                                values: ['使用中'],
                            },
                        })
                    } else {
                        alert(res.data.message);
                    }
                })



            },


五、原js接口使用
    请调用gridOptions.api或者列api直接操作
    如 this.clientpriceList.gridOptions.api.setColumnDefs(this.clientpriceList.columnDefsAll);
       that.gridOptions.api.setRowData(res.data.data.list);
六、参考文档
    https://www.ag-grid.com/documentation/
    https://www.itxst.com/ag-grid/tutorial.html
*/

Vue.component('ag-grid', {
    props: ['opt', "height","url"],//opt 是 gridOptions
    template: `<div   style="width: 100%;height:400px"   class="ag-theme-balham"></div>`,
    mounted: function () {
        var $grid = $(this.$el);
        new agGrid.Grid($grid[0], this.opt);//实例化
        // if (this.height != null) {
        //     $grid.css('height', this.height);
        // }
    },
    watch: {
        //赋值操作
        height: function (value) {//从新设置高度
            this.setHeight(value)
        },
    },
    methods: {
        setHeight(height) {
            var $grid = $(this.$el);
            $grid.css('height', height);
        }
    },
});

